<template>
  <footer class="footer">
    <!--工具栏-->
    <div class="foot-top">
      <ul>
        <li @click="changeExpression()" class="iconfont icon-biaoqing"></li>
        <li class="iconfont icon-tupian" @click="">
          <input ref="referenceUpload" class="file-image" name="customerService" type="file" value="" accept="image/*"
            v-on:change="sendImage" />
        </li>
        <li class="iconfont icon-shipin" @click="">
          <input ref="referenceUploadVideo" class="file-image" name="customerService" type="file" value=""
            accept="video/*" v-on:change="sendVideo" />
        </li>
      </ul>
      <div class="video" @click="video()"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 50 30">
          <g fill="none">
            <path
              d="M18 10a8 8 0 1 0-16 0l.007.346l.026.382a7.95 7.95 0 0 0 .829 2.887l.063.12l-.91 3.644l-.014.083v.082a.5.5 0 0 0 .62.441l3.645-.91l.12.064A8 8 0 0 0 18 10zM6 8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8zm7.146-.146a.5.5 0 0 1 .854.353v3.586a.5.5 0 0 1-.854.353L12 11V9l1.146-1.146z"
              fill="currentColor"></path>
          </g>
        </svg></div>
      <div class="phone"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 50 30">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
            <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"></path>
            <path d="M9 12a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1"></path>
          </g>
        </svg></div>
    </div>
    <!--表情包-->
    <div v-if="store.expressionShow" class="emjon">
      <n-scrollbar style="max-height: 100%">
        <ul>
          <li v-for="item in store.expressions" :key="item.title" :title="item.title">
            <img :src="item.icon" @click="selectIcon(item.icon)" />
          </li>
        </ul>
      </n-scrollbar>
    </div>
    <ChatEditor v-model:value="store.sendInfo" ref="editor" id="chatEditor" :height="135" class="answer-editor"
      placeholder=" "></ChatEditor>

  </footer>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useMainStore } from "../store/index";
const store:any = useMainStore();
import ChatEditor from "./ChatEditor.vue";
const editor = ref(null);
function changeExpression() {
  store.expressionShow = !store.expressionShow;
}
function selectIcon(icon: any) {
  changeExpression()
  let iconContent = `<img src='${icon}' class='emo-image' />`;
  store.editor.cmd.do("insertHTML", iconContent);
}
function video(){
store.isVideoShow=true
store.VideoReciver=store.reciver
}
</script>
<style scoped lang="less">
.footer {
  height: 35%;
  padding: 0 20px;
  width: 100%;
  background-color: #fff;
  position: relative;

  .foot-top {
    width: 100%;
    height: 25%;

    .video {
      position: relative;
      margin-top: -40px;
      right: -85%;
      width: 10%;
      height: 50px;
    }
    .phone {
      position: relative;
      margin-top: -53px;
      right: -90%;
      width: 10%;
      height: 50px;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
    }

    li {
      margin: 5px 10px;
      font-size: 25px !important;
      position: relative;
    }

    .file-image {
      margin-top: 5px;
      z-index: 1;
      position: absolute;
      opacity: 0;
      bottom: 0px;
      left: 0px;
      height: 40px;
      width: 25px;
    }
  }

  .emjon {
    width: 350px;
    height: 245px;
    position: absolute;
    left: 30px;
    top: -262px;
    background: #fff;
    // box-shadow: 2px 2px 4px #888888;
    overflow: auto;
    border-top-left-radius: 14px;
    border-bottom-right-radius: 14px;

    ul {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;



      li {
        width: 55px;
        font-size: 28px !important;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease 0s;
      }

      li:hover {
        // box-shadow: 0px 0px 5px #ccc;
        transform: scale(1.2);
      }

      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
